<template>
  <div class="space-y-6">
    <div v-for="(field, index) in config" :key="index" class="form-group">
      <label 
        :for="field.name" 
        class="block text-sm font-medium text-gray-700 mb-2"
      >
        {{ field.label }}
      </label>
      
      <!-- 单行输入框 -->
      <input
        v-if="field.type === 'input'"
        :id="field.name"
        v-model="localFormData[field.name]"
        type="text"
        :placeholder="field.placeholder"
        @input="updateModelValue"
        class="w-full px-4 py-2 text-gray-900 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 bg-white hover:border-gray-300"
      >
      
      <!-- 多行文本框 -->
      <textarea
        v-else-if="field.type === 'textarea'"
        :id="field.name"
        v-model="localFormData[field.name]"
        :rows="field.rows || 5"
        :placeholder="field.placeholder"
        @input="updateModelValue"
        class="w-full px-4 py-2 text-gray-900 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 bg-white hover:border-gray-300 resize-none"
      ></textarea>

      <!-- 如果有帮助文本 -->
      <p v-if="field.helpText" class="mt-2 text-sm text-gray-500">
        {{ field.helpText }}
      </p>
    </div>
  </div>
</template>

<script setup>
import { reactive, watch, onMounted } from 'vue';

const props = defineProps({
  config: {
    type: Array,
    required: true
  },
  modelValue: {
    type: Object,
    required: true
  }
});

const emit = defineEmits(['update:modelValue']);

// 初始化表单数据，包含默认值
const initFormData = () => {
  const formData = { ...props.modelValue };
  props.config.forEach(field => {
    if (field.defaultValue && !formData[field.name]) {
      formData[field.name] = field.defaultValue;
    }
  });
  return formData;
};

const localFormData = reactive(initFormData());

const updateModelValue = () => {
  emit('update:modelValue', { ...localFormData });
};

// 监听配置变化，更新默认值
watch(() => props.config, (newConfig) => {
  newConfig.forEach(field => {
    if (field.defaultValue && !localFormData[field.name]) {
      localFormData[field.name] = field.defaultValue;
    }
  });
}, { deep: true });

// 监听外部值变化
watch(() => props.modelValue, (newValue) => {
  Object.assign(localFormData, newValue);
}, { deep: true });

// 组件挂载时初始化默认值
onMounted(() => {
  const formData = initFormData();
  emit('update:modelValue', formData);
});
</script>

<style scoped>
/* 自定义滚动条样式 */
textarea {
  scrollbar-width: thin;
  scrollbar-color: #E5E7EB transparent;
}

textarea::-webkit-scrollbar {
  width: 6px;
}

textarea::-webkit-scrollbar-track {
  @apply bg-transparent;
}

textarea::-webkit-scrollbar-thumb {
  @apply bg-gray-200 rounded-full;
}

textarea::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-300;
}

/* 输入框焦点动画 */
input:focus, textarea:focus {
  @apply outline-none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

/* 禁用状态样式 */
input:disabled, textarea:disabled {
  @apply bg-gray-50 cursor-not-allowed;
}

/* 错误状态样式 */
.error input, .error textarea {
  @apply border-red-500;
}

.error .error-message {
  @apply text-red-500 text-sm mt-1;
}
</style>